<template>
  <div class="v-wot-mgt">
    <c-tab :option="option" v-model="tabValue">
      <template #opn>
        <div v-show="isProcess">
          <el-button>{{ multLang('title_pe') }}</el-button>
        </div>
        <div v-show="isTemplate">
          <div v-show="!visibles.templateAdd">
            <el-button type="primary" @click="addTemplate">{{
              tplLang('btn_wsq_a')
            }}</el-button>
            <el-button>{{ multLang('title_pe') }}</el-button>
            <el-button @click="delTemplate">{{
              multLang('btn_delete_a')
            }}</el-button>
          </div>
          <div v-show="visibles.templateAdd">
            <el-button @click="cancelTemplate">{{
              multLang('btn_cancel_a')
            }}</el-button>
            <el-button type="primary" @click="submitTemplate"
              >{{ multLang('btn_save_a') }}
            </el-button>
          </div>
        </div>
      </template>
      <template>
        <ProcessConfig v-show="isProcess" ref="Process"></ProcessConfig>
        <Template
          v-show="isTemplate"
          ref="Template"
          :is-add.sync="visibles.templateAdd"
        ></Template>
        <FieldLib v-show="isFieldLib" ref="Field"></FieldLib>
      </template>
    </c-tab>
  </div>
</template>
<script>
import FieldLib from './mod/FieldLib.vue'
import ProcessConfig from './mod/ProcessConfig.vue'
import Template from './mod/Template.vue'
export default {
  name: 'VWorkOrderTemplate',
  components: { FieldLib, ProcessConfig, Template },
  props: {},
  data() {
    return {
      visibles: {
        templateAdd: false
      },
      rawOption: ['流程配置', '工单模版', '字段库'],
      tabValue: ''
    }
  },
  computed: {
    option() {
      const option = []
      const reduce = (arr, item) => (arr.push(this.multLang(item)), arr)
      this.rawOption.reduce(reduce, option)
      return option
    },
    isProcess() {
      const is = this.option[0] === this.tabValue
      is && this.$refs.Process && this.$refs.Process.query()
      return is
    },
    isTemplate() {
      const is = this.option[1] === this.tabValue
      is && this.$refs.Template && this.$refs.Template.query()
      return is
    },
    isFieldLib() {
      const is = this.option[2] === this.tabValue
      is && this.$refs.Field && this.$refs.Field.query()
      return is
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.tabValue = this.multLang(this.rawOption[0])
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    click(d) {
      console.log(d)
    },
    addTemplate() {
      this.visibles.templateAdd = true
    },
    delTemplate() {
      this.$refs.Template.del()
    },
    cancelTemplate() {
      this.visibles.templateAdd = false
    },
    submitTemplate() {
      this.$refs.Template.add()
    }
  }
}
</script>
<style lang="scss">
.v-wot {
  &-mgt {
  }
}
</style>
